<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="step1" v-if="!bottomShow && !step">
			<image class="image" src="../../static/img/tabbar/ai.png" alt=""></image>
			<view class="title">正在准备升级题...</view>
			<view class="people">已有1000学员等待中</view>
		</view>
		<view class="stpes_top" v-if="!bottomShow && step">
			<view class="stpes_top_title">完成{{ total }}题后，可查看答案</view>
			<view class="stpes_top_title">{{ step + '/' + total }}</view>
			<view class="per" :style="{ width: ((step - 1) / total) * 100 + '%' }"></view>
		</view>

		<view class="contents" v-if="!bottomShow && step">
			<view class="title">
				[ 主观题 ] - [ {{ list[step - 1].type }} ]
			</view>
			<view class="label">
				{{ step }}.{{ list[step - 1].name }}
			</view>
			<!-- 单选 多选 判断 -->
			<view class="value"
				v-if="list[step - 1].type == '单选' || list[step - 1].type == '多选' || list[step - 1].type == '判断'">
				<view class="div_view" v-for="(item, index) in list[step - 1].answer" :key="index"
					@click="() => { radioClick(optionList[index], list[step - 1].max, list[step - 1].type) }"
					:style="{ backgroundColor: conputedColor(optionList[index]) }">
					<view class="value_option">
						{{ optionList[index] }}
					</view>
					<view class="titles">
						{{ item }}
					</view>
				</view>
			</view>
			<!-- 简答 -->
			<view class="value" v-if="list[step - 1].type == '简答'">
				<u--textarea height="180" placeholder="请输入答案" maxlength="-1" @input="inputChange"></u--textarea>
			</view>

			<view class="buttons" @click="submit">
				下一题
			</view>

		</view>

		<view class="step1" v-if="bottomShow">
			<view class="step1_contents"
				:style="{ color: flag ? 'rgb(255,210,2)' : 'rgb(227, 227, 227)', backgroundColor: flag ? 'rgb(150,232,246)' : 'rgb(213, 213, 213)' }">
				{{ bottomData.levelId }}
				<view class="tops" :style="{ borderBottomColor: flag ? 'rgb(150,232,246)' : 'rgb(213, 213, 213)' }">

				</view>
				<view class="bottom" :style="{ borderTopColor: flag ? 'rgb(150,232,246)' : 'rgb(213, 213, 213)' }">

				</view>
			</view>
			<view class="step1_title">
				{{ flag ? '你获得了' + bottomData.correctNum + '分，恭喜您成功晋级' : '你获得了' + bottomData.correctNum + '分，需要加紧练习哦' }}
			</view>
			<view :class="flag ? 'step1_buttons' : 'step1_button'" @click="gotos(flag)">
				{{ flag ? '挑战下一级' : '加油练习' }}
			</view>
		</view>
	</view>
</template>

<script>
import {
	systemInfo
} from '../../utils/mixin'
import { testLevel, finishTestLevel } from '@/api/index.js'
export default {
	components: {},
	mixins: [systemInfo],
	data() {
		return {
			list: [{
				type: '填空',
				question: '恐龙生活在什么年代填空',
			},
			{
				type: '单选',
				question: '恐龙生活在什么年代',
				answer: ['远古', '侏罗纪', '太古纪', '上古时代'],
				max: 1
			},
			{
				type: '多选',
				question: '恐龙生活在什么年代多选',
				answer: ['远古', '侏罗纪', '太古纪', '上古时代'],
				max: 3
			},
			],
			optionList: [
				'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'
			],
			step: 1,
			total: 0,
			// 作答答案
			answerList: [],
			bottomShow: false,
			flag: true,
			bottomData: {}
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();
	},
	onShow() {
		// 获取所有题目
		this.getpracticeList();

	},
	methods: {
		conputedColor(item) {
			return this.answerList[this.step - 1].includes(item) ? 'rgb(233,241,244)' : ''
		},
		// 获取所有练习题目
		async getpracticeList() {
			const res = await testLevel()
			res.rows.forEach((item) => {
				if (item.type == '单选' || item.type == '多选') {
					item.answer = [item.optionA, item.optionB, item.optionC, item.optionD]
					if (item.type == '单选') {
						item.max = 1
					}
					if (item.type == '多选') {
						item.max = 4
					}
				} else if (item.type == '判断') {
					item.answer = ['正确', '错误']
					item.max = 1
				}
			})
			this.list = res.rows
			this.answerList = new Array(res.total).fill([])
			this.total = res.total
		},
		// 单选事件
		radioClick(item, max, type) {
			// 再次点击取消
			if (this.answerList[this.step - 1].includes(item)) {
				const list = JSON.parse(JSON.stringify(this.answerList[this.step - 1]))
				const indexs = list.indexOf(item)
				list.splice(indexs, 1)
				this.answerList.splice(this.step - 1, 1, list)
			} else {
				// 选择的最大阈值
				if (this.answerList[this.step - 1].length < max) {
					const list = JSON.parse(JSON.stringify(this.answerList[this.step - 1]))
					list.push(item)
					this.answerList.splice(this.step - 1, 1, list)
				}
			}
		},
		// 输入框事件
		inputChange(e) {
			this.answerList.splice(this.step - 1, 1, e)
		},
		// 下一题
		async submit() {
			// 不是最后一题的时候
			if (this.step != this.total) {
				// 有选项的时候
				if (this.answerList[this.step - 1].length > 0) {
					this.step = this.step + 1
				}
			} else {
				const list = []
				this.answerList.forEach((item, index) => {
					list.push({
						codeId: this.list[index].codeId,
						questionId: this.list[index].id,
						userAnswer: this.list[index].type == '判断' ? (item.join(',') == 'A' ? '正确' : '错误') : item.join(',')
					})
				})
				const res = await finishTestLevel(list)
				this.bottomData = res.data
				if (res.data.correctNum >= res.data.upgradeNum) {
					this.flag = true
				} else {
					this.flag = false
				}
				this.bottomShow = true
			}
		},
		gotos(falg) {
			uni.switchTab({
				url: '/pages/tabbar/home/home',
				success: function (e) {
					uni.$emit('goon')
				}
			})
			// if (!falg) {
			// }
		}
	}
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.step1 {
		padding-top: 200rpx;
		box-sizing: border-box;
		text-align: center;

		.image {
			width: 190rpx;
			height: 190rpx;
		}

		.title {
			margin-top: 20rpx;
		}



		.people {
			width: 300rpx;
			margin-top: 20rpx;
			color: rgb(179, 173, 173);
			font-size: 30rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.step1_contents {
			position: relative;
			width: 300rpx;
			/* 六边形的宽度 */
			height: 180rpx;
			/* 六边形的高度 */
			margin: 50rpx auto;
			text-align: center;
			line-height: 180rpx;
			font-size: 180rpx;
			font-weight: 800;
			color: rgb(227, 227, 227);

			.tops {
				width: 0;
				height: 0;
				border-left: 150rpx solid transparent;
				border-right: 150rpx solid transparent;
				border-bottom: 75rpx solid;
				position: absolute;
				top: -75rpx;
			}

			.bottom {
				width: 0;
				height: 0;
				border-left: 150rpx solid transparent;
				border-right: 150rpx solid transparent;
				border-top: 75rpx solid;
				position: absolute;
				top: 180rpx;
			}

		}

		.step1_title {
			margin-top: 120rpx;
			text-align: center;
		}

		.step1_buttons {
			margin-top: 80rpx;
			width: 220rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			color: #fff;
			background-color: rgb(34, 175, 229);
			font-size: 28rpx;
			border-radius: 6rpx;
		}

		.step1_button {
			margin-top: 80rpx;
			width: 220rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			color: #fff;
			background-color: #000;
			font-size: 28rpx;
			border-radius: 6rpx;
		}
	}

	.contents {
		box-sizing: border-box;
		padding: 0 40rpx;

		.title {
			color: #03a9f4;
			margin-top: 80rpx;
			font-size: 30rpx;
		}

		.label {
			font-weight: 500;
			font-size: 36rpx;
			margin-top: 80rpx;
		}

		/deep/.u-textarea {
			margin-top: 80rpx;
		}

		.value {
			display: flex;
			width: 100%;
			align-items: center;
			font-size: 36rpx;
			box-sizing: border-box;
			flex-wrap: wrap;

			.value_option {
				margin-right: 40rpx;
				border: 1px solid;
				width: 34rpx;
				height: 34rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 34rpx;
				background-color: #fff;
				border-radius: 50%;
				margin-left: 40rpx;
			}

			.div_view {
				width: 100%;
				display: flex;
				align-items: center;
				height: 60rpx;
				margin-top: 40rpx;
			}
		}



	}

	.buttons {
		margin: 100rpx auto 0;
		width: 400rpx;
		height: 80rpx;
		background-color: rgba(34, 175, 229);
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		border-radius: 10rpx;
		letter-spacing: 20rpx;
	}

	.stpes_top {
		width: 100%;
		height: 70rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 0 40rpx;
		position: relative;

		.stpes_top_title {
			position: relative;
			z-index: 2;
		}

		.per {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			height: 100%;
			background-color: rgb(159, 219, 255);
		}
	}
}
</style>